<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-04-12 22:25:18
 * @LastEditTime: 2023-01-10 21:37:32
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 抽屉入口组件
 * @FilePath: \vue3-element-plus-web\src\views\DrawerDemo\components\Drawer\index.vue
 * Copyright 版权声明
-->

<template>
  <drawer-layout>
    <!-- 中间内容区 -->
    <template #default>
      <!-- 新增、编辑 -->
      <template v-if="drawerType === 'CREATE' || drawerType === 'UPDATE'">
        <create ref="createCompRef"></create>
      </template>
      <!-- 查看 -->
      <template v-if="drawerType === 'DETAIL'">
        <detail ref="detailCompRef"></detail>
      </template>
    </template>
    <!-- 底部按钮区 -->
    <template #footer>
      <Footers @handleCallback="handleCallback"></Footers>
    </template>
  </drawer-layout>
</template>

<script>
import { mapGetters } from 'vuex'
import Footers from './footer.vue'
// import Create from './create.vue'
import Create from './createStandardForm.vue'
// import Detail from './detail.vue'
import Detail from './detailStandardForm.vue'
import { addSave, updateSave } from '@/api/nav'

export default {
  name: 'business',
  computed: {
    ...mapGetters([
      'drawerVisible',
      'drawerCurrent'
    ]),
    drawerType: function() {
      return this.drawerCurrent.drawerType
    },
    moduleValue: function() {
      return this.drawerCurrent.module
    }
  },
  components: {
    Footers,
    Create,
    Detail
  },
  data() {
    return {
    }
  },
  watch: {
  },
  created() {
    // console.log(this.drawerCurrent)
    // this.$store.dispatch('SetDrawerloading', true)
    // console.log('drawerType:', this.drawerType)
  },
  activated() {
  },
  deactivated() {
  },
  methods: {
    // 子组件操作回调
    handleCallback({ handle, params }) {
      switch (handle) {
        // 新建 - 保存
        case 'createData':
          this.$refs.createCompRef.submitForm().then(valid => {
            // 获取要提交的数据
            const data = this.$refs.createCompRef.getFormData()
            // drawer loadding 状态 打开
            this.$store.dispatch('SetDrawerloading', true)
            addSave(data).then(response => {
              // drawer loadding 状态 关闭
              this.$store.dispatch('SetDrawerloading', false)
              // drawer 关闭
              this.$store.dispatch('CloseDrawer')
              // 重载页面
              this.$store.dispatch('SetReloadPage')
              this.$notify({
                title: '成功',
                message: '新建成功',
                type: 'success',
                duration: 2000
              })
              // this.$store.dispatch('ShowDrawer', {
              //   module: this.moduleValue,
              //   type: 'DETAIL',
              //   params: data
              // }).then(res => {

              // })
            }).catch(err => {
              // drawer loadding 状态 关闭
              this.$store.dispatch('SetDrawerloading', false)
              err
            })
          }).catch(err => {
            err
          })
          break
        // 编辑 - 保存
        case 'updateData':
          this.$refs.createCompRef.submitForm().then(valid => {
            // 获取要提交的数据
            const data = this.$refs.createCompRef.getFormData()
            // drawer loadding 状态 打开
            this.$store.dispatch('SetDrawerloading', true)
            updateSave(data).then(response => {
              // drawer loadding 状态 关闭
              this.$store.dispatch('SetDrawerloading', false)
              // drawer 关闭
              this.$store.dispatch('CloseDrawer')
              // 重载页面
              this.$store.dispatch('SetReloadPage')
              this.$notify({
                title: '成功',
                message: '编辑成功',
                type: 'success',
                duration: 2000
              })
              // this.$store.dispatch('ShowDrawer', {
              //   module: this.moduleValue,
              //   type: 'DETAIL',
              //   params: data
              // }).then(res => {

              // })
            }).catch(err => {
              // drawer loadding 状态 关闭
              this.$store.dispatch('SetDrawerloading', false)
              err
            })
          }).catch(err => {
            err
          })
          break
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
